<!--
 * @Author: xu xuejia
 * @Date: 2021-12-02 15:05:06
 * @LastEditors: xu xuejia
 * @LastEditTime: 2021-12-20 19:01:24
 * @Description: 表格二次封装
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\components\MyTsble\index.vue
-->
<template>
  <div class="dashboard-container">
    <!-- <el-row> -->
    <div>
      <!-- <el-col :span="6" :push="12"> -->
      <!-- v-model="filterStatus1" -->
      <el-radio-group v-model="filterStatus1" style="width:250px;float:right;margin-bottom: 15px" @change="radioChange">
        <el-radio-button label="全部">全部</el-radio-button>
        <el-radio-button label="初审通过">初审通过</el-radio-button>
        <!-- <el-radio-button label="复审通过">复审通过</el-radio-button> -->
        <el-radio-button label="未通过">未通过</el-radio-button>
      </el-radio-group>
    </div>
    <!-- </el-col> -->

    <!-- <el-col :push="12"> -->
    <div>
      <el-input v-model="listQuery.query" placeholder="请输入项目名称" clearable style="width:250px;float:right;margin-right:10px;margin-bottom: 15px" @clear="search">
        <el-button slot="append" icon="el-icon-search" @click="search" />
      </el-input>
    </div>
    <!-- </el-col> -->
    <!-- </el-row> -->
    <div class="table-wrap">
      <el-table
        ref="multipleTable"
        class="table"
        :data="data.list"
        :row-class-name="rowClassName"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          width="50px"
          label="#"
        >
          <template slot-scope="scope">
            <span>{{ (listQuery.page-1)*listQuery.pageSize+(scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="peId"
          label="审核编号"
        /> -->
        <el-table-column prop="projectName" label="项目名" width="220px" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-row>
              <el-col class="NameF">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img :src="scope.row.fileMap.logo" alt="" style="width: 150px;height: 150px">
                  <img slot="reference" :src="scope.row.fileMap.logo" style="width: 80px;height: 80px">
                </el-popover>
                <span :show-overflow-tooltip="true" class="NameStyle">{{ scope.row.projectName }}</span>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          prop="leaderId"
          label="负责人"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="departmentId"
          label="所属单位"
        />
        <el-table-column
          prop="planTime"
          label="计划时间"
        />
        <el-table-column
          prop="examineStatus"
          label="审核状态"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-thumb"
              size="mini"
              @click="detail(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-table
        v-if="filterStatus1 !=='全部'"
        ref="multipleTable"
        :data="myFiles"
        :row-class-name="rowClassName"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="#"
        />
        <el-table-column
          prop="peId"
          label="审核编号"
        />
        <el-table-column prop="projectName" label="项目名" width="220px">
          <template slot-scope="scope">
            <el-row>
              <el-col class="NameF">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img :src="scope.row.fileMap.logo" alt="" style="width: 150px;height: 150px">
                  <img slot="reference" :src="scope.row.fileMap.logo" style="width: 80px;height: 80px">
                </el-popover>
                <span class="NameStyle">{{ scope.row.projectName }}</span>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          prop="leaderId"
          label="负责人"
        />
        <el-table-column
          prop="departmentId"
          label="所属单位"
        />
        <el-table-column
          prop="completeTime"
          label="结束时间"
        />
        <el-table-column
          prop="examineStatus"
          label="审核状态"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-thumb"
              size="mini"
              @click="detail(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        v-else
        ref="multipleTable"
        :data="data.list"
        :row-class-name="rowClassName"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="#"
        />
        <el-table-column
          prop="peId"
          label="审核编号"
        />
        <el-table-column prop="projectName" label="项目名" width="220px">
          <template slot-scope="scope">
            <el-row>
              <el-col class="NameF">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img :src="scope.row.fileMap.logo" alt="" style="width: 150px;height: 150px">
                  <img slot="reference" :src="scope.row.fileMap.logo" style="width: 80px;height: 80px">
                </el-popover>
                <span class="NameStyle">{{ scope.row.projectName }}</span>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          prop="leaderId"
          label="负责人"
        />
        <el-table-column
          prop="departmentId"
          label="所属单位"
        />
        <el-table-column
          prop="completeTime"
          width="180px"
          label="结束时间"
        />
        <el-table-column
          prop="examineStatus"
          label="审核状态"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-thumb"
              size="mini"
              @click="detail(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table> -->
    </div>
    <div class="pagination-wrap">
      <!-- <el-pagination
        v-if="filterStatus1==='全部'"
        style="text-align: right;"
        :current-page="listQuery.page"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listQuery.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-pagination
        v-else
        style="text-align: right;"
        :current-page="listQuery.page"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="myFiles.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
      <el-pagination
        style="text-align: right;"
        :current-page="listQuery.page"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listQuery.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
// import Projectdetail from '../../views/projectexam/Projectdetail.vue'
export default {
  name: 'Index',
  // components: { Projectdetail },
  props: {
    data: {
      type: Object,
      default: function() {
        return {
        }
      }
    },
    filterStatus: {
      type: String,
      default: '全部'
    },
    listQuery: {
      type: Object,
      default: function() {
        return {
          page: 1,
          pageSize: 10,
          total: 0,
          query: ''
        }
      }
    }
  },
  data: function() {
    return { filterStatus1: this.filterStatus }
  },
  // computed: {
  //   myFiles: function() {
  //     return this.data.list.filter(item => item.examineStatus === this.filterStatus1)
  //   }
  // },
  methods: {
    radioChange(val) {
      this.$emit('radioChange', val)
    },
    firstpassDisplay() {
      this.$emit('firstpassDisplay', this.listQuery)
    },
    notpassDisplay() {
      this.$emit('notpassDisplay')
    },
    // pagesize改变时触发
    handleSizeChange(val) {
      this.$emit('sizeChange', val)
    },
    // currentPage 改变时会触发
    handleCurrentChange(val) {
      this.$emit('currentChange', val)
    },
    search() {
      this.$emit('search', this.listQuery.query)
    },
    detail(row) {
      this.$emit('detail', row)
    },
    rowClassName({ row, rowIndex }) {
      row.id = rowIndex + 1
    }
  }
}
</script>

<style scoped lang="scss">
.table {
  width:1045px;
  // height:150px;
  overflow:hidden;
}
.NameStyle{
   text-align: top;
   vertical-align: middle;
   margin-top: auto;
   margin-bottom: auto;
   display:inline-block;
   align-self:center
}
.NameF{
  display:flex
}
</style>
